<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<script src="js/vue.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<body>
<div id="app">

    <table>
        <tr>
            <td>身份证号  <input type="text" id="card" value=""></td>
            <td></td>
            <td></td>
            <td>就诊医生*
                <select  id="sele">
                    <option value="">请选择</option>
                    <option  v-for="(item,index) in users" v-if="item.id!=1" :value="item.id" >{{item.userName}}</option>
                </select>
            </td>
        </tr>
        <tr>

            <td>挂号单状态*
                <select  id="zt">
                    <option value="">请选择</option>
                    <option :value="1">已挂号,未问诊</option>
                    <option :value="2">正在问诊</option>
                    <option :value="3">问诊结束</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td><button @click="querya()">查询</button></td>
        </tr>
    </table>


    <form name="f1" >
        <table border="1" width="80%">
            <tr>
                <td>挂号单编号</td>
                <td>病人姓名</td>
                <td>性别</td>
                <td>身份证号</td>
                <td>就诊科室</td>
                <td>挂号时间</td>
                <td>创建时间</td>
                <td>挂号单状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="(a,index) in queryall">
                <td v-text="a.id"></td>
                <td v-text="a.patient.name"></td>
                <td v-text="a.patient.sex==1?'男':'女'"></td>
                <td v-text="a.patient.idCard"></td>
                <td v-text="a.department.name"></td>
                <td v-text=""></td>
                <td v-text=""></td>
                <td v-if="a.status==1">已挂号未问诊</td>
                <td v-if="a.status==2">正在问诊</td>
                <td v-if="a.status==3">问诊已结束</td>
                <td>
                    <a v-if="a.status==1" :href="'pat!queryPat?id='+a.patient.id">开始问诊</a>
                    <a v-if="a.status==2" :href="'pat!queryPat?id='+a.patient.id">开始问诊</a>
                    <a :href="'med!queryDetais?medicalAdvice.userId='+a.sysUsers.id">查看详情</a>
                </td>
            </tr>
        </table>
        <div >
            <nav aria-label="Page navigation example" class="d-flex justify-content-center">
                <div>
                    <ul class="p pagination" style="list-style: none;">
                        <li style="display: inline;"> 当前第<input  v-model="pageInfo.pageNum" style="width: 30px;text-align: center;"/>
                            页/{{pageInfo.pages}}</li>
                        <li class="page-item " :class="{disabled:pageInfo.isFirstPage}"  style="display: inline;">
                            <a class="page-link" href="javascript:;"  @click="querya(pageInfo.pageNum-1)" >上一页</a></li>
                        <li v-for="(item,index) in pageInfo.navigatepageNums" class="page-item"
                            :class="{active:item==pageInfo.pageNum}"  style="display: inline;">
                            <a class="page-link" href="javascript:;"
                               @click="querya(item)">{{item}}</a>
                        </li>
                        <li class="page-item" :class="{disabled:pageInfo.isLastPage}"  style="display: inline;"><a class="page-link"
                                                                                                                   href="javascript:;"  @click="querya(pageInfo.pageNum+1)">下一页</a></li>
                    </ul>
                </div>

            </nav>
        </div>
    </form>

</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            users:[],
            sche:[],
            queryall:[],
            pageNum:1,
            pageSize:1,
            pageInfo:''  //分页信息对象
        },
        methods:{
            querya(num){
                this.pageNum=num;
                var card=$("#card").val();
                var jz=$("#dep option:selected").val();
                var gh=$("#sele option:selected").val();
                var zt=$("#zt option:selected").val();
                $.getJSON({
                    type: "GET",  //提交类型必须与服务器要求的一致
                    url: "reg!queryByLike",   //远程服务器接口的地址请求后端
                    data:{"y.idCard":card,"y.name":jz,
                        "y.userName":gh,"y.status":zt,
                        "pageNum":this.pageNum,"pageSize":this.pageSize},
                    success: function (json) {
                        console.log(JSON.stringify(json));
                        app.pageInfo=json[0];  //获取服务器的分页json对象
                        app.queryall=json[1];  //获得服务器里面的集合
                    }
                });
            }
            ,
            goto(){

                $.getJSON({

                    type: "GET",  //提交类型必须与服务器要求的一致
                    url: "user!queryAll",   //远程服务器接口的地址请求后端
                    success: function (json) {
                        app.users=json;  //获得服务器里面的集合
                    }
                });
            },
            date(){
                $.getJSON({
                    type: "GET",  //提交类型必须与服务器要求的一致
                    url: "sche!queryByDate",   //远程服务器接口的地址请求后端
                    success: function (json) {
                        app.sche=json;  //获得服务器里面的集合
                    }
                });
            },

        },mounted(){
            //从服务器拿数据
            this.goto();
            this.querya(1);
            this.date();

        }
    });

</script>
</body>
</html>
